<template>
<div class="body">
  <div class="container-fluid p-0 vh-100">
    <!--头部-->
    <div class="header">
      <!--导航条-->
      <nav class="navbar navbar-expand-lg navbar-light" style="height:52px">
        <img src="images/logo.png" alt="" style="width: 200px; ">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">

            <li class="nav-item active">
              <a class="nav-link" href="#">消息<span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item ">
              <a class="nav-link" href="#">班级 <span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item ">
              <a class="nav-link" href="#">私聊<span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item ">
              <a class="nav-link" href="#">成绩<span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item ">
              <a class="nav-link" href="#">调查<span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                成长
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown" style=" border: none;">
                <a class="dropdown-item " href="#" style="color: black;">成长记录</a>
                <a class="dropdown-item " href="#" style="color: black;">同步课堂</a>
                <a class="dropdown-item " href="#" style="color: black;">在线课程</a>
                <a class="dropdown-item " href="#" style="color: #000000;">内容发布</a>
              </div>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="#" style="margin-left:330px">安全退出<span class="sr-only">(current)</span></a>
              </li>
          </ul>
        </div>
      </nav>
    </div>
    <!--侧边栏  -->
    <div class="container-fluid">
        <div class="row">
            <div class="sidebar">
                <div class="cover">
                    <h2><img class="img-circle" src="images/login.jpg" style="border-radius: 50%;"/></h2>
                    <b>梨雨</b>
                    <p><button class="btn btn-primary">修改资料</button></p>
                </div>             
<div class="lvc-wrap" id="lvc-nav">
  <ul class="lvc-nav">
    <li class="nav-pic1 next-layer" title="课堂管理">
      <a>课堂管理</a>
      <ol>
        <li>历史课堂统计</li>
        <li>课堂实时统计</li>
      </ol>
    </li>
    <li class="nav-pic2" title="科目管理"><a>科目管理</a></li>
    <li class="nav-pic3" title="教室管理"><a>教室管理</a></li>
    <li class="nav-pic4" title="课堂点播"><a>课堂点播</a></li>
    <li class="nav-pic5" title="课堂直播"><a>课堂直播</a></li>
    <li class="nav-pic6" title="用户管理"><a>用户管理</a></li>
    <li class="nav-pic7 next-layer" title="报表统计">
    <a>报表统计</a>
        <ol>
        <li>历史课堂统计</li>
            <li>课堂实时统计</li>
        </ol>
    </li>
    <li class="nav-pic8" title="日志管理"><a>日志管理</a></li>
    <li class="nav-pic9" title="系统管理"><a>系统管理</a></li>
    <li class="nav-pic10" title="订单管理"><a>订单管理</a></li>
    <li class="nav-pic11" title="我的课堂"><a>我的课堂</a></li>
    <li class="nav-pic12" title="个人中心"><a>个人中心</a></li>
  </ul>
  <button type="button" class="btn-nav"></button>
</div>
</div>
</div>
</div>
            <!-- 侧边栏 完-->
    <!-- 主体部分  -->
            <div class="main">    主体部分的内容</div>
            </div>
            </div>
</template>

<script>
export default {
  name: 'Home',
  props: {
    
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   .body {background-color:#CCCCCC; width: 1200px;margin: 0px auto;}
    #lunbotu {width: 1200px;margin: 0px auto;}
    nav { background-color:#F8E834;color: black;}
    #navbarSupportedContent a { font-size: 15px;margin: 5px;}
    dropdown-item:hover {background-color:#CCCCCC; }
      /* sidebar
 ---------------------------------------- */
.sidebar{position: fixed; width: 16.9%; height: 100%; background: #262930; transition: all .3s ease;}
.sidebar > h4{margin: 0; padding: 18px 10px;background: #00bfa5; color: #fff; font-size: 18px;  white-space: nowrap;}
.cover{padding-top:40px; padding-bottom: 10px;margin-left: 60px;text-align: center;  background:#262930; }
.cover > h2{position: relative; margin: 0 auto; max-height: 80px; max-width: 80px; }
.cover > h2 img{position: relative; z-index: 100; width: 100%;  border: 1px solid #1ab394; }
.cover > h2:after{content:''; left: -12px; top: -8px; height: 96px; width: 96px; background: #3d4147; border-radius: 50%; }
.cover > b{margin-top: 10px;color: #f3f3f4; font-size: 16px; }
.cover > p{ margin-top: 4px;color: #acb0b8; font-size: 12px;}
/*sidenav*/
.sidenav,.sidebar-dropdown{padding: 0; }
.sidenav a{color: #9d9d9d; }
.sidenav > li > a{display: block; padding: 10px; font-size: 14px; border-left: 2px solid transparent;   transition: .3s linear; }
.sidenav > li > a > i{margin-right: 10px;}
.sidenav > li > a.hover,
.sidenav > li > a:hover{border-left: 2px solid #21b496; background: #20242c; text-decoration: none;}
.iright{margin-top: 4px; font-family:"宋体"; font-style: normal; }
.sidebar-dropdown{display: none;font-size: 14px; background: #20242c; border-left: 2px solid #21b496; }
.sidebar-dropdown > li > a{display: block; padding: 10px 0 10px 36px;}
/* main
 ---------------------------------------- */
.main{width: auto !important;
right:0px;overflow: hidden; margin-left: 215px; transition: all .3s ease; padding-top: 50px;}
</style>
